<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
    <script src="js/common.js"></script>
    <link rel="stylesheet" href="css/animate.css">
    <style>
        @font-face {
        font-family: "fafa";
        src: url("./手指二次元体.ttf");
        }
        *{
            padding:0;
            margin:0;
        }
        #app {
            position: absolute;
            top:0;
            bottom:0;
            width:100%;
            background-image:url("img/bg1.png");
            background-repeat: no-repeat;
            background-size:auto 100%;
            overflow:hidden;
        }
        .a{
            position:absolute;
            top: -2rem;
            left:-25%;
            width:150%;
        }
        .b{
            position:absolute;
            top: -1.5rem;
            left:10%;
            width:80%;
        }
        .msg{
            position:absolute;
            background-image:url("./img/bg2.png");
            background-repeat:no-repeat;
            background-size: 100% auto;
            width:100%;
            height: 12rem;
            top: 2.5rem;
            text-align: center;
            padding-top:20%;
        }
        .msg >span {
            display: block;
            font-size: 2.8rem;
            color:white;
            font-family: fafa;
        }
        .c{
            position: absolute;
            width:130%;
            bottom: -1.8rem;
            left:-10%;
        }
        .d{
            background-image: url("./img/bottom2.png");
            background-repeat: repeat-x;
            background-size: auto 100%;
            width:100%;
            position:absolute;
            bottom: 0.4rem;
            left: 0px;
            height: 2.5rem;
        }
        .e{
            position:absolute;
            bottom: 0.24rem;
            left:0px;
            height: 2.5rem;
        }
        .f{
            position:absolute;
            bottom: 0.24rem;
            right: 0.266667rem;
            height: 2rem;
        }
    </style>
</head>
<body>
    <audio src="" display="none" autoplay></audio>
    <div id="app">
        <transition 
            enter-active-class="animated fadeInDown"
            :appear="true"
            @after-enter="flag1=true"
        >
            <img class="a" src="./img/tree.png" alt="">
        </transition>
        <transition
            enter-active-class="animated fadeInDown"
            :appear="true"
            @after-enter="flag2=true"
        >
            <img v-show="flag1" class="b" src="./img/lidang.png" alt="">
        </transition>
        <transition
            enter-active-class="animated fadeInUp"
            :appear="true"
        >
            <div v-show="flag3" class="msg">
               <span>圣诞</span>
               <span>快乐</span>
           </div>
        </transition>
        <transition
            enter-active-class="animated fadeInUp"
            :appear="true"
            >
            <img class="c" src="./img/bottombg.png" alt="">
        </transition>
        <transition
            enter-active-class="animated fadeInUp"
            :appear="true"
        >
            <div v-show="flag1" class="d"></div>
        </transition>
        <transition
            enter-active-class="animated fadeInUp"
            :appear="true"
            @after-enter="flag3=true"
        >
            <img v-show="flag2" class="e" src="./img/bottom1.png" alt="">
        </transition>
        <transition
            enter-active-class="animated fadeInUp"
            :appear="true"
            @after-enter="flag3=true"
        >
            <img v-show="flag2" class="f" src="./img/tree2.png" alt="">
        </transition>
    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            flag1:false,
            flag2:false,
            flag3:false

        }
    })
</script>
</html>